<!-- 机构管理-机构列表 -->
<template>
  <div class="big_content">

      <el-page-header @back="goBack" content="机构列表">
      </el-page-header>
      <!-- <h3 style="display: block">机构列表</h3> -->
      <p class="head_p">
        当前共{{
          consumeData.schoolNumber +
          consumeData.hospitalNumber +
          consumeData.hospitalNumber
        }}家机构
      </p>

    <el-tabs type="border-card" @tab-click="tabClick" v-model="activeTab">
      <!-- class="m-t-b" -->
      <!-- 学校 -->
      <el-tab-pane :label="'学校(' + consumeData.schoolNumber + ')'" name="1" class="btn01">

        <el-card v-for="(item, enterpriseId) in schoolList" :key="enterpriseId" class="elcard">
          <div class="content_card">
            <img src="../assets/images/school.png" width="25.45" height="25.45"/>
            <h4 @click="lookMember(item)">{{ item.enterpriseName }}</h4>
            <div v-if="item.schoolYear != null" class="grade">
              <p>{{ item.schoolYear ? " " + item.schoolYear + "年" : " " }}</p>
            </div>

            <div style="text-align: center; margin-top: 10px">
              <p class="city el-icon-location-information">
                {{ item.province + item.city }}
              </p>
              <p class="people el-icon-user-solid">
                {{ item.memberNumber ? item.memberNumber : "没" }}人
              </p>
            </div>
          </div>
          <!--          放一个下拉菜单-->
          <el-dropdown class="dropdown" trigger="click">
            <span class="el-dropdown-link">
              <!--               不放字-->
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="setPersonName(item)" >
                设置推广人</el-dropdown-item >
              <el-dropdown-item @click.native="setMentalChart(item)" >
                设置量表</el-dropdown-item >
              <el-dropdown-item disabled @click.native="lookMember(item)" >
                点击学校查看成员</el-dropdown-item >
              <!-- <el-dropdown-item disabled @click.native="lookHeart(item)" >
                心里统计</el-dropdown-item > -->
              <el-dropdown-item @click.native="showOrHideTravel(item)" >
                显示行程</el-dropdown-item >
              <!--            <el-dropdown-item @click.native="setPersonName()">测试</el-dropdown-item>-->
            </el-dropdown-menu>
          </el-dropdown>
        </el-card>

        <el-pagination
          class="flex m-t-b page_bar"
          :page-size="pageSize"
          background
          layout="prev, pager, next"
          :current-page.sync="currentSchoolPage"
          @current-change="handlePagi($event, 1)"
          :total="schoolTotal"
        >
        </el-pagination>
      </el-tab-pane>

      <!-- 公司 -->
      <el-tab-pane
        :label="'公司(' + consumeData.enterpriseNumber + ')'"
        name="2"
        class="btn01">


        <el-card
          v-for="(item, enterpriseId) in companyList"
          :key="enterpriseId"
          class="elcard"
        >
          <div class="content_card">
            <img
              src="../assets/images/company.png"
              width="25.45"
              height="25.45"
            />
            <h4 @click="lookMember(item)">{{ item.enterpriseName }}</h4>
            <div style="text-align: center; margin-top: 10px">
              <p class="city el-icon-location-information " >{{ item.province + item.city }}</p>
              <p class="people el-icon-user-solid">{{ item.memberNumber + "人" }}</p>
            </div>
          </div>
          <!-- 下拉菜单 -->
          <el-dropdown trigger="click" class="dropdown">
            <span class="el-dropdown-link">
              <!--               不放字了-->
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item disabled @click.native="lookMember(item)"
                >查看成员请点击公司</el-dropdown-item
              >
              <el-dropdown-item @click.native="setMentalChart(item)"
                >设置量表</el-dropdown-item
              >
              <el-dropdown-item @click.native="goKnowledge(item)"
                >查看推文</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-card>

        <!--                      <el-table :data="schoolList" stripe border class="m-t-b" v-loading="schoolLoading">-->
        <!--                        <el-table-column label="公司名称" prop="enterpriseName"></el-table-column>-->
        <!--                        <el-table-column label="公司简称" prop="forShort"></el-table-column>-->
        <!--                        <el-table-column label="所在省" prop="province"></el-table-column>-->
        <!--                        <el-table-column label="所在市" prop="city"></el-table-column>-->
        <!--                        <el-table-column label="操作">-->
        <!--                          <template slot-scope="scope">-->
        <!--                            <el-button size="mini" type="primary" @click="setPersonName(scope.row)">测试</el-button>-->
        <!--                            <el-button size="mini" type="primary" @click="setMentalChart(scope.row)">设置量表</el-button>-->
        <!--                            <el-button size="mini" type="primary" @click="goKnowledge(scope.row)">查看推文</el-button>-->
        <!--                          </template>-->
        <!--                        </el-table-column>-->
        <!--                      </el-table>-->
        <el-pagination
          class="flex m-t-b page_bar"
          :page-size="pageSize"
          background
          layout="prev, pager, next"
          @current-change="handlePagi($event, 2)"
          :total="companyTotal"
        >
        </el-pagination>
      </el-tab-pane>

      <!-- 医院 -->
      <el-tab-pane
        :label="'医院(' + consumeData.enterpriseNumber + ')'"
        name="3"
        class="btn01">


        <el-card style="display: inherit" v-for="(item, enterpriseId) in hospitalList" :key="enterpriseId" class="elcard">
          <div class="content_card">
            <img src="../assets/images/hospital.png" width="25.45" height="25.45"/>
            <h4 @click="lookMember">{{ item.enterpriseName }}</h4>
            <div style="text-align: center; margin-top: 10px">
              <p class="city el-icon-location-information " >{{ item.province + item.city }}</p>
              <p class="people el-icon-user-solid">{{ item.memberNumber + "人" }}</p>
            </div>
          </div>
          <el-dropdown trigger="click" class="dropdown">
            <span class="el-dropdown-link">
              <!--               这里就不放字了-->
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click="setPersonName(item)"
                >设置推广人</el-dropdown-item
              >
              <el-dropdown-item @click="setMentalChart(item)"
                >设置量表</el-dropdown-item
              >
              <el-dropdown-item disabled @click="lookMember(item)"
                >查看成员</el-dropdown-item
              >
              <el-dropdown-item @click="showOrHideTravel(item)"
                >显示行程</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-card>
        <!--        <el-table :data="hospitalList" stripe border class="m-t-b" v-loading="hospitalLoading">-->
        <!--          <el-table-column label="医院名称" prop="enterpriseName"></el-table-column>-->
        <!--          <el-table-column label="医院简称" prop="forShort"></el-table-column>-->
        <!--          <el-table-column label="所在省" prop="province"></el-table-column>-->
        <!--          <el-table-column label="所在市" prop="city"></el-table-column>-->
        <!--          <el-table-column label="操作">-->
        <!--            <template slot-scope="scope">-->
        <!--              <el-button size="mini" type="primary" @click="setMentalChart(scope.row)">设置量表</el-button>-->
        <!--            </template>-->
        <!--          </el-table-column>-->
        <!--        </el-table>-->

        <el-pagination
          class="flex m-t-b"
          :page-size="pageSize"
          background
          layout="prev, pager, next"
          @current-change="handlePagi($event, 3)"
          :total="hospitalTotal"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>



    <!-- 公司搜索 -->
    <div class="school_search" v-if="clickindex==2">

            <el-input
              style="width: 200px"
              placeholder="输入公司名称搜索"
              v-model="searchText2"
              @keypress.enter.native="handleSearch"
              @input="clearSearch"
              clearable
            />
            <el-button
              type="primary"
              @click="handleSearch"
              style="margin-left: 10px;padding:0 12px 0 12px"
            >
              <i class="el-icon-zoom-in" style="font-size:20px"></i>
            </el-button>

          <!-- 添加 -->
          <el-button @click="goAddOrganization('2')" style="padding:0 12px 0 12px">
            <i class="el-icon-plus" style="font-size:20px"></i>
          </el-button>
    </div>
    <!-- 医院搜索 -->
    <div v-else-if="clickindex==3" class="school_search">

        <el-input placeholder="输入医院名称搜索" v-model="searchText3" @keypress.enter.native="handleSearch"
              @input="clearSearch"
              style="width: 200px;"
              clearable/>
        <el-button type="primary" @click="handleSearch" style="margin-left: 10px;padding:0 12px 0 12px" >
          <i class="el-icon-zoom-in" style="font-size:20px"></i>
        </el-button>

      <el-button  @click="goAddOrganization('3')"  style="padding:0 12px 0 12px">
        <i class="el-icon-plus" style="font-size:20px "></i>
      </el-button>
    </div>
     <!-- 学校搜索 -->
    <div class="school_search" v-else>
          <!--            搜索-->
          <el-input
            style="width: 260px"
            placeholder="输入学校名称搜索"
            v-model="searchText1"
            @keypress.enter.native="handleSearch"
            @input="clearSearch"
            clearable
          />
          <el-button
            type="primary"
            style="margin-left: 10px;padding:0 12px 0 12px"
            @click="handleSearch"
          >
            <i class="el-icon-zoom-in"  style="font-size:20px"></i>
          </el-button>
          <!--          添加学校-->
          <el-button  @click="goAddOrganization('1')" style="padding:0 12px 0 12px">
            <i class="el-icon-plus"  style="font-size:20px"></i>
          </el-button>
    </div>


    <el-dialog title="选择推广人" :visible.sync="showSetting">
      推广人:<el-select
        v-model="selectedAdminId"
        placeholder="请选择"
        filterable
        clearable

      >

        <!--      <el-option v-for="item in promotersList" :label="item.userNickname" :value="item.userId" :key="item.userId"></el-option>-->
        <el-option
          v-for="item in promotersList"
          :label="item.userNickname"
          :value="item.userId"
          :key="item.userId"
        ></el-option>
      </el-select>
      <el-button
        size="medium"
        @click="determineSet"
        style="margin-left: 20px; display: block"
        type="success"
        >确认设置</el-button
      >
    </el-dialog>

    <!-- 这里不需要了 -->
    <el-dialog title="所有成员" :visible.sync="showMemberDialog">
      <div style="display: flex; justify-content: space-between">
        <div>
          <el-input
            style="width: 200px"
            placeholder="家长微信昵称"
            v-model="wechatName"
            @input="clearMemberSearch(1)"
            @keypress.enter.native="handleMemberSearch"
          />

          <el-input
            style="width: 200px"
            placeholder="成员昵称"
            v-model="memberName"
            @input="clearMemberSearch(2)"
            @keypress.enter.native="handleMemberSearch"
          />
        </div>
        <el-button type="primary" @click="handleMemberSearch">搜索</el-button>
      </div>
      <el-table
        stripe
        border
        class="m-t-b"
        :data="memberList"
        v-loading="memberLoading">
        <el-table-column label="成员昵称" prop="name"></el-table-column>
        <el-table-column label="家长微信昵称" prop="nickname"></el-table-column>
        <el-table-column label="年龄" prop="barthday"></el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            {{ scope.row.sex == 1 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column label="年级信息">
          <template slot-scope="scope">
            {{ scope.row.grade }} * {{ scope.row.grades }} * {{ scope.row.sno }}
          </template>
        </el-table-column>
        <el-table-column label="创建日期" prop="createDate"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="goMemberInfo(scope.row)"
              >查看体温/行程
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="flex m-t-b"
        :page-size="pageSize"
        layout="prev, pager, next"
        @current-change="handleMemberPagi"
        :current-page.sync="currentPage"
        :total="memberTotal"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>


<script>
import {
  getADPerson,
  getOrganizationList,
  getEnterpriseConsume,
  getEnterpriseMember,
  getOrganizationListByType,
  changeShowTravel,
  setPromoters,
  setPromoters2,
  boundentErpriseIdPromotionId,
  forbiddenEnterprise,
} from "../api/version2";
import { getAllMentalChart } from "../api";
import { formatDate } from "../util";

export default {
  name: "OrganizationList",
  data() {
    return {
      clickindex:0,
      promotersList: [], //推广人列表
      schoolId: "", //学校Id
      showMemberDialog: false,
      showTravel: false,
      currentPage: 1,
      consumeData: {
        schoolNumber: 0,
        hospitalNumber: 0,
        fireNumber: 0,
        enterpriseNumber: 0,
      },
      cusChart: {
        schoolId: "",
        psychologyTitleId: "",
        resultStatus: 1,
        recommendType: 0,
      },
      searchText1: "",
      searchText2: "",
      searchText3: "",
      adminList: [],
      chartList: [],
      showSetting: false,
      showChartDialog: false,
      selectedAdminId: "",
      schoolTypes: ["幼儿园", "小学", "初中", "高中", "大学"],
      activeTab: "1",
      schoolLoading: false,
      companyLoading: false,
      hospitalLoading: false,
      schoolTotal: 0,
      companyTotal: 0,
      hospitalTotal: 0,
      schoolList: [],
      companyList: [],
      hospitalList: [],
      pageSize: 10,
      memberLoading: false,
      memberName: "",
      wechatName: "",
      enterpriseId: "",
      memberList: [],
      memberTotal: 0,
      currentSchoolPage: 1,
      schoolInsertMarketUserData: {
        userId: " ",
        userNickname: " ",
        userName: " ",
        creatData: " ",
      },
    };
  },
  methods: {

    goBack(){history.back()},

    fetchOrganizationList(index, type) {
      // 查询机构列表 type: 1 > 学校 2 > 企业 3 > 医院
      const loadingKey =
        type == 1
          ? "schoolLoading"
          : type == 2
          ? "companyLoading"
          : "hospitalLoading";
      this[loadingKey] = true;
      getOrganizationListByType({
        index,
        count: this.pageSize,
        queryParam: {
          type: Number(type),
          enterpriseName: this["searchText" + type] || null,
        },
      })
        .then((res) => {
          console.log(res);
          this[loadingKey] = false;
          let list = res.data.data.list || [];
          this[
            type == 1
              ? "schoolTotal"
              : type == 2
              ? "companyTotal"
              : "hospitalTotal"
          ] = res.data.data.totalRecord || 0;
          this[
            type == 1
              ? "schoolList"
              : type == 2
              ? "companyList"
              : "hospitalList"
          ] = list;
          console.log(list);
        })
        .catch((e) => {
          this[loadingKey] = false;
        });
    },
    goMemberInfo(row) {
      // 查看成员体温/行程
      this.$router.push(
        `/member/temperature/${row.memberId}?name=${row.name}&age=${row.barthday}&gender=${row.sex}&school=${row.enterpriseName}`
      );
    },
    handleMemberSearch() {
      this.currentPage = 1;
      this.fetchMemberList(1);
    },
    tabClick({ index }) {
      // tab栏切换

      index = Number(index) + 1;

      let listKey =
        index === 1
          ? "schoolList"
          : index === 2
          ? "companyList"
          : "hospitalList";
        this.clickindex=Number(index);
      if (!this[listKey].length) {
        this.fetchOrganizationList(1, index);
        // this.clickindex=Number(index);
      }
    },
    handlePagi(page, type) {
      // 分页
      if (type == 1) {
        this.currentSchoolPage = page;
      }
      this.fetchOrganizationList(page, type);
    },
    setPersonName(item) {
      // 设置录入人信息

      if (!this.$checkAuth("setPromoter")) {
        return this.$message.error("暂无对应操作权限");
      }
      console.log(item);
      this.showSetting = true;
      this.schoolId = item.enterpriseId;
      setPromoters2({}).then((res) => {
        let list = res.data.data || [];
        console.log(list);
        this.promotersList = list;
      });
      // setPromoters2().then(res => {
      //   console.log(res)
      //   // let list = res.data.data || [];
      //   // console.log(list);
      //   this.promotersList = res;
      // })
    },

    // 将当前选中的推广人和学校的id绑定给后端
    determineSet() {
      const promotionPersonId = this.selectedAdminId;
      // const promotionPersonId = this.SchoolInsertMarketUser;

      const enterpriseId = this.schoolId;
      boundentErpriseIdPromotionId({
        userId: promotionPersonId,
        enterpriseId: enterpriseId,
      }).then((res) => {
        // if(res.data.code == 1){
        //   this.$message.success("推广人设置成功");
        //   this.selectedAdminId = "";
        //   this.showSetting = false;
        // } else {
        //   this.$message.error("设置失败");
        // }

        if (!this.selectedAdminId) {
          this.$message.error("推广人不能为空");
        } else {
          this.$message.success("推广人设置成功");
          this.selectedAdminId = "";
          this.showSetting = false;
        }
      });
    },

    fetchMentalList() {
      // 查询心理量表
      getAllMentalChart()
        .then((res) => {
          let list = res.data.data || [];
          this.chartList = list;
        })
        .catch((e) => {});
    },

    setMentalChart({ enterpriseId, enterpriseName }) {
      // 设置心理量表
      if (!this.$checkAuth("setMentalChart")) {
        return this.$message.error("暂无对应操作权限!");
      }
      this.$router.push(
        `/organization/chart/${enterpriseName}/${enterpriseId}`
      );
    },

    alterSchool(row) {
      if (!this.$checkAuth("changeSchool")) {
        return this.$message.error("暂无对应操作权限!");
      }
      this.$router.push({
        path: "/organization/add?type=" + 1,
        query: {
          id: row.enterpriseId,
          name: row.enterpriseName,
        },
      });
      console.log(row);
    },
    goAddOrganization(type) {
      // 进入添加机构
      if (!this.$checkAuth("addOrganization")) {
        return this.$message.error("暂无对应操作权限!");
      }
      this.$router.push("/organization/add?type=" + type);
    },
    goKnowledge(row) {
      // 查看所有推文
      if (!this.$checkAuth("lookTweet")) {
        return this.$message.error("暂无对应操作权限!");
      }
      this.$router.push(
        `/organization/knowledge/${row.enterpriseId}/${row.enterpriseName}`
      );
    },
    handleSearch() {
      // 搜索
      if (!this.$checkAuth("searchByName")) {
      // if (this.$checkAuth("searchByName")) {
        return this.$message.error("暂无对应操作权限!");
      }
      if (!this["searchText" + this.activeTab].trim()) {
        return this.$message.error("搜索条件不能为空");
      }
      this.fetchOrganizationList(1, this.activeTab);
    },
    clearSearch() {
      // 清除搜索
      if (!this["searchText" + this.activeTab].trim()) {
        this.fetchOrganizationList(1, this.activeTab);
      }
    },
    fetchEnterpriseConsume() {
      // 查询机构统计数据
      getEnterpriseConsume()
        .then((res) => {
          let obj = res.data.data;
          this.consumeData.schoolNumber = obj.schoolNumber;
          this.consumeData.hospitalNumber = obj.hospitalNumber;
          this.consumeData.fireNumber = obj.fireNumber;
          this.consumeData.enterpriseNumber = obj.enterpriseNumber;
        })
        .catch((e) => {});
    },
    clearMemberSearch(type) {
      // 清除成员搜索
      if (type == 1 && !this.wechatName.trim()) {
        this.fetchMemberList(1);
      } else if (type == 2 && !this.memberName.trim()) {
        this.fetchMemberList(1);
      }
    },
    // lookMember(row) {
    //   // 查看成员
    //   if (this.$checkAuth("lookMember")) {
    //     //  if (!this.$checkAuth('lookMember')) {
    //     return this.$message.error("暂无对应操作权限!");
    //   }
    //   this.showTravel = Boolean(row.showTravel);
    //   this.enterpriseId = row.enterpriseId;
    //   this.showMemberDialog = true;
    //   this.memberList = [];
    //   this.currentPage = 1;
    //   this.wechatName = "";
    //   this.memberName = "";
    //   this.fetchMemberList(1);
    // },
    lookMember(row) {
      // 查看成员
      // if (this.$checkAuth("lookMember")) {
         if (!this.$checkAuth('lookMember')) {
        return this.$message.error("暂无对应操作权限!");
      }
      this.$router.push(
        `memberlist/${row.type}/${row.enterpriseName}/${row.enterpriseId}`
        //  `/organization/memberlist/${row}`
      );
      // this.showTravel = Boolean(row.showTravel);
      this.enterpriseId = row.enterpriseId;
      // this.showMemberDialog = true;
      this.memberList = [];
      this.currentPage = 1;
      this.wechatName = "";
      this.memberName = "";
      this.fetchMemberList(1);
    },
    handleMemberPagi(page) {
      // 成员列表分页
      this.currentPage = page;
      this.fetchMemberList(page);
    },
    fetchMemberList(index) {
      // 查询机构成员
      this.memberLoading = true;
      getEnterpriseMember({
        index,
        count: this.pageSize,
        queryParam: {
          // enterpriseId: this.enterpriseId,
          enterpriseName: this.enterpriseName,
          name: this.memberName || null,
          nickname: this.wechatName || null,
        },
      })
        .then((res) => {
          this.memberLoading = false;
          let list = res.data.data.list || [];
          list.forEach((item) => {
            item.createDate = formatDate(item.createDate, "zh:");
          });
          this.memberList = list;
          // console.log(list);
          this.memberTotal = res.data.data.totalRecord;
        })
        .catch((e) => {
          this.memberLoading = false;
        });
    },
    setShowTravelButton(enterpriseId, type) {
      // 是否允许查看行程
      changeShowTravel(enterpriseId, type)
        .then((res) => {
          this.$message.success("操作成功");
          this.fetchOrganizationList(1, this.currentSchoolPage);
        })
        .catch((e) => {});
    },
    showOrHideTravel(row) {
      // 显示或隐藏行程
      // if (!this.$checkAuth('isShowTravel')) {
      if (this.$checkAuth("isShowTravel")) {
        return this.$message.error("暂无对应操作权限!");
      }
      this.$confirm(
        `确定 ${row.showTravel ? "禁用" : "开启"} ${
          row.enterpriseName
        } 查看本校学生行程记录及体温的权限?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then((r) => {
          this.setShowTravelButton(
            row.enterpriseId,
            Math.abs(row.showTravel - 1)
          );
        })
        .catch((err) => {});
    },
    // 禁用企业
    deleteSchool(row) {
      console.log(row);
      if (!this.$checkAuth("isDeleteSchool")) {
        return this.$message.error("暂无对应操作权限!");
      }
      this.$confirm(
        `您确定要 ${row.enterpriseStatus ? "禁用" : "启用"} ${
          row.enterpriseName
        } 吗？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          forbiddenEnterprise({
            enterpriseStatus: row.enterpriseStatus,
            enterpriseId: row.enterpriseId,
          }).then((res) => {
            console.log(res);
            if (row.enterpriseStatus == 1) {
              let type = this.$route.query.type;
              this.fetchOrganizationList(1, type || 1);
              this.$message.success("禁用成功");
            } else if (row.enterpriseStatus == 0) {
              let type = this.$route.query.type;
              this.fetchOrganizationList(1, type || 1);
              this.$message.success("启用成功！");
            } else {
              this.$message.error("设置失败！");
            }
          });
        })
        .catch(() => {
          // this.$message.info("已取消删除");
          // let type = this.$route.query.type;
          // this.fetchOrganizationList(1, type || 1);
        });
    },
  },
  created() {
    let type = this.$route.query.type;
    this.activeTab = type || "1";
    this.fetchOrganizationList(1, type || 1);
    this.fetchMentalList();
    this.fetchEnterpriseConsume();
  },
};
</script>


<style lang="scss">
.cell {
  .el-button {
    margin-top: 10px;

    &:nth-of-type(2n - 1) {
      margin-left: 0 !important;
    }
  }
}

.head {
  span {
    display: block;
  }
}

.head_p {
  margin-left: 90px;
  margin-bottom: 20px;
  display: block;
  width: 86px;
  height: 17px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 17px;
  color: #c4c4c4;
  opacity: 1;
  white-space: nowrap;
}

.head-list {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;

  & > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 120px;
    border-radius: 4px;
    box-shadow: 0 0 10px #ccc;

    img {
      margin-right: 20px;
      width: 80px;
      height: 80px;
    }

    & > div > span {
      display: block;
      font-weight: bold;

      &:nth-of-type(1) {
        font-size: 20px;
      }

      &:nth-of-type(2) {
        font-size: 30px;

        span {
          font-size: 20px;
          color: #666;
        }
      }
    }
  }
}

.search {
  position: absolute;
  top: -20px;
  right: 0;
  z-index: 999;
}

.big_content {
  padding-left: 92px;
  padding-right: 82px;
  padding-top: 14px;
  .btn01 {
    display: inline-block;

    .elcard {
      // 卡片大小控制
      width: 282px;
      height: 108px;
      margin-right: 20px;
      margin-bottom: 14px;
      display: inherit;
    }
    .dropdown {
      float: right;
      // position: absolute;
      // top: 0;
      // right: 0;
      // margin-right: 10px;
    }
  }
  .content_card {
     // 卡片的内容区大小
     padding: 10px 10px 10px 12px;
     margin-top: 7px;
     float: left;
     width: 220px;
     height: 88px;
     background: #ffffff;
     opacity: 1;
     border-radius: 10px;
     position: relative;
     // text-align: center;

     .grade {
       width: 39px;
       height: 19px;
       background: #EDF8F3;
       color: #86D7B6;
       border-radius: 4px;
       position: absolute;
       // float: right;
       top: 11px;
       right: -17px;
       text-align: center;
     }
     .city {
       display: inline-block;
       margin-right: 14px;
     }
     .people {
       display: inline-block;
       margin-left: 14px;
     }

     img {
       display: inline-block;
     }

     h4 {
       display: inline-block;
       width: 168px;
       white-space: nowrap;
       // background: rgb(241, 183, 183);
       cursor: pointer;
       margin-left: 4px;
     }



   }
  // 下拉菜单的三个点
  .el-icon-arrow-down:before{
    cursor: pointer;
    // margin-left: 10px;
    content:"...." !important;
  }
  // 下拉菜单
  .el-dropdown{
    margin : 10px 15px 0 0 !important;

  }

  .el-tabs__item{
    border-radius: 30px;
    // background: #E7F2ED;
    // background: rgb(255, 255, 255);

    background: #F2F2F3 !important;
    color: #5FCB9F;
    //border: 1p solid rgb(0, 0, 0) !important;
    width: 108px;
    height: 32px;
    font-size: 15px !important;
    margin: 0 10px 0 0 !important;
    text-align: center;
    //padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    // display: inline;
    padding-bottom: 5px !important;
  }

  .is-active{
    background: #E7F2ED !important;

  }
  *::selection{
    background: rgb(255, 255, 255) !important;

  }
  .el-tabs--border-card {
    // height: 22px !important;
    box-shadow: none !important;
    border: none !important;

  }
  .el-tabs__nav{
    border: none !important;
    margin: 15px 0 15px 0 !important;
    padding: 10px;
  }
  .el-tabs__content{
    border: none !important;
    border-top: 1px solid #E7E7E7 !important;
  }
  .el-tabs__header{
    background: none !important;
    // float: left;
    display: inline-block;
    height: 22px !important;
    // width: 400px !important;
  }


}
.school_search{
  display: flex;
  // display: inline-block;
  width: 300px;
  position: absolute;
  top: 145px;
  right: 130px;
  z-index: 999;
}
.page_bar {
  // 下面页码条条
  // background: lightpink;
  border-radius: 30px;
}



</style>
